<template>
  <div class="table-data">
      <el-form
        :rules="rules"
        ref="ruleForm"
        :model="form"
        size="small"
        class="form-box">
        <el-form-item label="标题" prop="title">
            <el-input type="text" v-model="form.title" placeholder="请输入标题" ></el-input>
        </el-form-item>
        <el-form-item label="副标题" prop="sub_title">
            <el-input type="text" v-model="form.sub_title" placeholder="请输入副标题"></el-input>
        </el-form-item>
        <el-form-item prop="log_img">
            <label for="verify_hour" class="el-form-item__label form-label">封面图</label>
            <uploadImg @bindSendImg="propImg" :key="timer" :imgUrl="form.log_img"></uploadImg>
        </el-form-item>
        <el-form-item label="文章内容" prop="relation_value">
            <el-row>
                <el-col :span="12">
                    <ueditor :content="form.relation_value" :key="timer" @ueditor-change="editorChange"></ueditor>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
                <el-radio :label="1">发布</el-radio>
                <el-radio :label="2">暂不发布</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
            <el-input type="number" v-model.number="form.sort"></el-input>
        </el-form-item>
     </el-form>
     <div class="but">
         <el-button class="button" @click="CancelTheOperation()">取消</el-button>
        <el-button type="primary" class="button" @click="submitFormAdd('ruleForm')">确定</el-button>
     </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop, Provide, Watch } from "vue-property-decorator";
  import uploadImg from "@/components/uploadImg/index.vue";
  import ueditor from "@/components/ueditor/index.vue";
  import articleApi from "@/api/article";
  @Component({
    components: {uploadImg,ueditor}
  })
  export default class newEditor extends Vue {
    @Provide() timer:any=''
    check:boolean = true
    rules:any = {
      title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      sub_title: [{ required: true, message: "请输入副标题", trigger: "blur" }],
      log_img: [{ required: true, message: "请上传封面", trigger: "change" }],
      relation_value: [{ required: true, message: "请编辑文章内容", trigger: "blur" }],
    }
    @Provide() form:any = {
        title:'',
        sub_title:'',
        log_img:'',
        relation_value:'',
        status:1,
        sort:0,
        id:''
    }
    // 上传图片子组件传递过来的图片路径
    propImg(imgPath: any){
      this.form.log_img = imgPath;
    }
    // 富文本编辑
    editorChange(data:any) {
      this.form.relation_value = data.content;
    }
    created() {
       
        if (this.$route.query.id) {
            this.loadData(this.$route.query.id)
        }
    }
    loadData(id){
        articleApi.indexArticleDetail(id)
            .then(res=>{
                 this.timer=new Date().getTime()
                this.form = res.data.data;
            })

    }
    CancelTheOperation() {
        this.$router.push({
            path:'/articleList'
        })
    }
    // 提交
    submitFormAdd(formName: any) {
      (this.$refs[formName] as any).validate((valid: boolean) => {
        if (valid) {
          if(this.check) {
            let _this = this
            _this.check = false
            articleApi.companyArticleEdit(this.form)
            .then((res: any) => {
              if(res.data.code){
                _this.$message({
                  message: '操作成功',
                  type: "success"
                });
                _this.$router.push({
                  path:'/articleList'
                })
                _this.$emit("loadData")
                setTimeout(function(){
                  _this.check = true
                },3000)
              }else{
                _this.$message({
                  message: res.data.msg,
                  type: "error"
                });
                _this.check = true
              }
            });
          }
          
        } else {
          this.$confirm('商品信息未完善，请核查', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          })
        }
      });
    }
  }
</script>

<style lang="scss" scoped>

.table-data {
    background: #fff;
}
.el-input--small .el-input__inner {
    width: 120px !important;
}
.form-box {
    margin-bottom: 20px;
    padding: 40px;
    .el-input,
    .el-select {
        width: 200px !important;
    }
     .title{
      line-height: 60px;
      font-weight: bold;
      font-size: 16px;
    }
    .price-title{
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .price-txt{
      font-size: 14px;
      color: #333;
    }
    .price-tip{
      color: red;
      font-size: 12px;
      margin-left: 50px;
    }
    .specBox {
      width: 75%;
      min-height: 200px;
      max-height: 800px;
      overflow-y: scroll;
      padding: 10px;
      border: 1px solid #d8d8d8;
      .specTable {
        border: 1px solid #e3e3e3;
        thead {
          background: #f5f5f5;
        }
        th,td {
          width: 120px;
          padding: 3px 8px;
          text-align: center;
          border: 1px solid #e3e3e3;
          .el-input{
            width: 100px !important;
          }
        }
      }
    }
}
.but {
    text-align: center;
}
</style>